<template>
 <div>
     <!-- 
        获取DOM元素
            * 救命稻草,前端框架就是为了减少DOM操作,但是特顶情况下,可以操作DOM
                - 在指定的元素上,添加ref='名称A'
                - 在获取的地方加入 this.$refs.名称A
                    - 如果ref放在了原生DOM元素上,获取的数据就是原生DOM对象
                        + 可以直接操作
                    - 如果ref放在了组件对象上,获取的就是组件对象
                        + 1:获取到DOM对象,通过this.$refs.名称A.$el进行操作
                    - 对应的事件
                        + created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
                        + mounted 将数据已经装载到了DOM上,可以操作DOM    
      -->
      <h3>DOM操作</h3>
      <div>
          <div ref='myDiv'>
              {{text}}
          </div>
      </div>
 </div>
</template>

<script type="text/ecmascript-6">
 export default{
     data(){
         return {
            text:''
         }
     },
    //  组件创建后,数据已经完成初始化,但是DOM还未完成
    created(){
        // console.log('这是created'+this.$refs.myDiv)
    },
    // 数据装载后,各种数据已经就位,将数据渲染到DOM上,DOM已经生产
   mounted(){
        // console.log('这是mounted'+this.$refs.myDiv);
        // 给DIV赋值
        // 设计到DOM类的操锁
        // this.$refs.myDiv.innerHTML=this.text;
        // 涉及到数据操作
        this.text='白小白'
   }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">

 
</style>
